<template>
  <div>
    <p>vue3--Demo(使用setup函数)--基础语法</p>
    <a-divider>基础语法==内容</a-divider>
    <p>基本数据类型--数值型--当前值：{{ dataId }}</p>
    <a-button type="primary" @click="onChangeDataId">点击按钮改变数据值</a-button>
    <a-divider />
    <p>基本数据类型--bool型--当前值：{{ dataFlag }}</p>
    <a-button type="primary" @click="onChangeDataFlag">点击按钮改变数据值</a-button>
    <a-divider />
    <a-input
      v-model:value="dataDescription"
      size="small"
      show-count
      :maxlength="100"
      placeholder="输入文本信息时自动获取输入值"
      allow-clear
    />
    <p>基本数据类型--字符串型--当前值：{{ dataDescription }}</p>
    <a-divider />
    <p>对象数据类型--当前值：{{ fixModelData }}</p>
    <a-button type="primary" @click="onChangeFixModelData">点击按钮改变对象</a-button>
    <a-divider />
    <p>对象数据类型--当前值：{{ dynamicModelData }}</p>
    <a-button type="primary" @click="onChangeDynamicModelData">点击按钮改变对象</a-button>
    <a-divider>简化写法：v-on (缩写为 @) v-bind (缩写为 :) </a-divider>
  </div>
</template>
<script lang="ts">
  import { random } from 'lodash-es';
  import { defineComponent, ref, reactive } from 'vue';
  import { DataModel } from './data';

  export default defineComponent({
    setup() {
      console.log('Demo(使用setup函数)--基础语法 setup 函数 执行了。');

      //基本数据类型使用ref包裹变成响应式，实现双向绑定；使用.value进行取值和赋值
      const dataId = ref(1);
      const dataFlag = ref<boolean>(true);
      const dataDescription = ref<string>('信息的描述文字');

      //数组、对象类型使用reactive包裹变成响应式，实现双向绑定，直接使用变量进行取值和赋值；
      //注意不要重复使用reactive赋值；可动态改变数据结构--不指定对象类型时可动态改变
      const fixModelData: DataModel = reactive({
        id: '初始化ID值',
        name: '初始化name值',
        flag: true,
      });
      const dynamicModelData = reactive({});

      function onChangeDataId() {
        let now = new Date();
        dataId.value = now.getSeconds();
      }

      function onChangeDataFlag() {
        dataFlag.value = !dataFlag.value;
      }

      function onChangeFixModelData() {
        //模型结构中未定义的直接赋值不报错，代码中有提示
        fixModelData.attr1 = new Date();
        fixModelData.attr2 = random(10);
        //赋值类型与模型定义类型不一致，赋值也不报错，代码中有提示
        fixModelData.flag = 'flag新值';
      }

      function onChangeDynamicModelData() {
        dynamicModelData.attr1 = new Date();
        dynamicModelData.attr2 = random(10);
      }

      return {
        dataId,
        dataFlag,
        dataDescription,
        fixModelData,
        dynamicModelData,
        onChangeDataId,
        onChangeDataFlag,
        onChangeFixModelData,
        onChangeDynamicModelData,
      };
    },
  });
</script>
<style scoped></style>
